<template>
	<view>
		<!-- 公共顶部导航栏 -->
		<navbar></navbar>
		<view style="background: #FFFFFF;padding:0 30rpx;">
			<image src="../../static/topic/658.png" mode="aspectFit"
				style="width: 690rpx;height: 144rpx;margin-top: 24rpx;"></image>
			<view style="margin-top: 46rpx;padding-bottom:40rpx  ;">
				<view style="font-size: 36rpx;color: #1E1E1E;font-weight:650;">时事话题</view>
				<view class="flex justify-between align-center" v-for="(item,index) in topic" :key="index"
					style="margin: 20rpx 0;">
					<view class="flex align-center">
						<view v-if="index!=0" style="font-size: 32rpx;color: #1E1E1E;">{{index+1}}</view>
						<image v-else src="../../static/2.png" mode="aspectFit" style="width:48rpx;height:48rpx;">
						</image>
						<view style="color: #1E1E1E;font-size: 32rpx;margin-left: 30rpx;">{{item.name}}</view>
					</view>
					<view style="color:#1E1E1E;opacity: .3;">{{item.num}}个回答</view>
				</view>
			</view>
		</view>

		<view style="background-color: #FFFFFF;margin-top:30rpx;padding:30 30rpx;">
			<view class="flex" style="border-bottom:1rpx solid rgba(30,30,30,0.1);overflow: hidden;padding:20rpx 0 ;">
				<view @click="tabber(index)" class="tabStyle" :class="taberIndex==index ? 'tabSae' :''  "
					v-for="(item,index) in taberType">{{item}} </view>
			</view>
		</view>
		<view style="padding:44rpx 50rpx;background: #FFFFFF;" @click="goDetail()">
			<view class="flex justify-between align-center">
				<view>
					<view style="color: #1E1E1E;font-size: 32rpx;">#全屋定制#</view>
					<view style="font-size: 24rpx;color: rgba(30,30,30,0.3);">5w个回答</view>
				</view>
				<view class="makeClear">讲两句</view>
			</view>
			<view class="box flex flex-direction justify-center"
				style="text-align: center; padding:20rpx 30rpx ;margin-bottom: 30rpx;">
				<view style="font-size: 28rpx;color: #1E1E1E;">Rain老婆金泰熙也被曝光追缴数亿韩元资产。首尔税务厅对金泰熙开展税务调查...</view>
				<view class="flex justify-between">
				<view class="flex align-center">
					<image src="../../static/1.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
					<view style="margin-left: 15rpx;color: rgba(30,30,30,0.3); font-size: 24rpx;">365</view>
				</view>
					<view class="flex align-center">
						<image src="../../static/1.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
						<view style="margin-left: 15rpx;color: rgba(30,30,30,0.3); font-size: 24rpx;">婷大仙儿</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/publicomps/navbar.vue";
	export default {
		components: {
			navbar,
		},
		data() {
			return {
				topic: [{
						name: '#全屋定制#',
						num: 50000
					},
					{
						name: '#做衣柜为什么要找设计师#',
						num: 4365
					},
					{
						name: '#板材该如何选择#',
						num: 3452
					},
					{
						name: '#一招教你怎么识别板材#',
						num: 10000
					}
				],
				taberType: ['关注', '选择避坑', '配色风格', '设计', '收纳'],
				taberIndex: 0
			}
		},
		onShow() {

		},
		methods: {
			tabber(e) {
				this.taberIndex = e
				console.log(this.taberIndex, '对对对')
			},
			goDetail(){
				this.$tools.goPageNoAuth('./detailsOfHotTopics')
			}
		}
	}
</script>

<style scoped>
	.tabStyle {
		color: rgba(30, 30, 30, 0.3);
		opacity: .3;
		font-size: 36rpx;
		margin-left: 43rpx;

	}

	.tabSae {
		color: #000000;
		font-weight: 700;
		opacity: 1;
	}

	.makeClear {
		width: 140rpx;
		height: 48rpx;
		border-radius: 32rpx;
		opacity: 1;
		color: #492D22;
		color: 26rpx;
		text-align: center;
		border: 1rpx solid #492D22;
	}

	.box {
		width: 630rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 20rpx;
		margin-top: 32rpx;
		border-bottom: 1rpx solid rgba(30, 30, 30, 0.1);
	}
</style>
